<template>
  <div class="rank-content">
    <div class="hot-word-list" v-if="this.rankListData.length !== 0">
      <ul>
        <li
          v-for="(item, index) in rankListData"
          :key="item.id"
          :class="{
            first: index == 0,
            second: index == 1,
            third: index == 2,
          }"
        >
          <span class="list-index">{{ index + 1 }}</span>
          <span class="word-name">{{ item.wordName }}</span>
          <a-progress :percent="item.percent" style="width: 100%">
            <template #format="percent">
              <span class="word-percent">{{ percent }}%</span>
            </template>
          </a-progress>
        </li>
      </ul>
    </div>
    <div class="empty" v-else>
      <a-empty style="margin-top:100px;"></a-empty>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rankList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rankListData: [],
    };
  },
  mounted() {
    this.rankListData = this.rankList;
  },
  watch: {
    rankList: {
      handler(newV) {
        this.rankListData = newV;
      },
      deep: true,
    },
  },
};
</script>

<style lang="stylus" scoped>
.rank-content{
  margin-top:25px;
  height:350px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 25px;
  box-sizing:border-box;
}
.hot-word-list {
    li {
      color: #333;
      margin-bottom: 12px;
      display: flex;
      align-items: center;

      .word-name {
        width: 100px;
        padding-left: 12px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 15px;
      }

      .list-index {
        font-size: 17px;
        text-align: center;
        display: inline-block;
        width: 33px;
        color: #919191;
      }

      .word-percent {
        font-size: 16px;
        color: #333;
        margin-left: 10px;
      }
    }
}
</style>
